<!--
 * @Author: '浪川' '1214391613@qq.com'
 * @Date: 2025-07-17 15:06:11
 * @LastEditors: '浪川' '1214391613@qq.com'
 * @LastEditTime: 2025-07-21 16:29:24
 * @FilePath: \passiflora-edulis-sims\src\components\BookCanvasComponent.vue
 * @Description: 书籍页设置，每一页设置
 *
 * Copyright (c) 2025 by '1214391613@qq.com', All Rights Reserved.
-->
<script setup lang="ts">
import type { IUnit } from 'src/interfaces/IBook'
import { useCanvasStore } from 'src/stores/canvas-store'
import { computed, ref } from 'vue'

const units_ch = ref<string[]>(['英寸', '厘米', '毫米', '像素'])
const units = ref<Record<string, string>>({
  in: '英寸',
  cm: '厘米',
  mm: '毫米',
  px: '像素',
})
const canvas = useCanvasStore()

// 对单位进行中英文转换
const unit_en2ch = computed({
  get() {
    return units.value[canvas.unit]
  },
  set(new_val) {
    for (const key in units.value) {
      if (new_val == units.value[key]) {
        canvas.unit = key as IUnit
      }
    }
  },
})
</script>
<template>
  <div>
    <div class="row">
      <div class="col-4 q-pr-sm">
        <q-input
          v-model.number="canvas.width"
          label="页宽度"
          type="number"
          outlined
        >
        </q-input>
      </div>
      <div class="col-4 q-pr-sm">
        <q-input
          v-model.number="canvas.height"
          label="页高度"
          type="number"
          outlined
        >
        </q-input>
      </div>
      <div class="col-3">
        <q-select
          rounded
          outlined
          v-model="unit_en2ch"
          :options="units_ch"
          label="单位"
        />
      </div>
    </div>
  </div>
</template>

<style lang="sass" scoped></style>
